<template>
	<view class="container">
		<u-navbar :title="$t('home.stored_value')" placeholder bgColor="#12be98" leftIconColor="#FFFFFF"
			:rightText="$t('home.value_storage_rules')" @rightClick="hanldeRule" titleStyle="color: #FFFFFF" autoBack>
		</u-navbar>

		<view class="content">
			<view class="quk-card">
				<view class="mar-bottom-15 font-42">
					{{store.userInfo.balance}} <text class="font-24 color_929292">USDT</text>
				</view>
				<view class="font-26 color_929292">{{$t('home.wallet_balance')}}</view>
			</view>

			<view class="wt-panel">
				<view class="network">
					<text class="font-32">{{lineName}}</text>
					<view @click="visibleNetwork = !visibleNetwork" class="item-btn">{{$t('home.re_select')}}</view>
				</view>

				<view class="wt-input_items">
					<view class="font-26 mar-bottom-20">
						{{$t('home.money')}} ( <text class="color_DD4A68 font-24">USDT</text> )
					</view>
					<up-input type="number" :placeholder="$t('home.please_enter_stored_amount')"
						v-model="formData.amount" @change="handleInput" color="#fc7831" border="surround"></up-input>
				</view>

				<view class="tri-cell mar-top-20">
					<view class="color_009D64 font-26">{{$t('home.accumulated_value_amount')}}： {{formData.amount}} USDT
					</view>
				</view>

				<view class="rc-cell" v-for="item in robotList.filter(item => Number(item.price) > 0)" :key="item.id">
					<view class="flex_bd">
						<view class="rc-title">{{item.title}} {{$t('home.price')}} <text
								class="color_edad14 font-26">{{Number(item.price).toString()}}</text><text
								class="font-24 color_929292"> USDT</text> </view>
						<view class="rc-title">{{$t('home.start_funds')}} <text
								class="color_edad14 font-26">{{Number(item.init_fund).toString()}}</text><text
								class="font-24 color_929292"> USDT</text> </view>
					</view>
					<view class="item-btn" @click="formData.amount = addStrings(item.init_fund,item.price)">
						{{addStrings(item.init_fund,item.price)}} USDT
					</view>
				</view>
			</view>

			<view class="mar-top-80">
				<up-button color="#ffc820" :customStyle="customStyle"
					@click="handConfirmRecharge">{{$t('home.confirm_stored_value')}}</up-button>
			</view>
		</view>

		<up-popup :show="visibleNetwork" mode="bottom" @close="visibleNetwork = false">
			<view class="popup-content">
				<view class="popup-head">
					<view></view>
					<text>{{$t('home.please_select_link')}}</text>
					<up-icon @click="visibleNetwork = false" name="close-circle" color="#ffffff" size="24"></up-icon>
				</view>

				<scroll-view scroll-y class="scroll-list">
					<up-radio-group activeColor="#0184FA" v-model="formData.channel_id" @change="visibleNetwork = false"
						shape="square" iconPlacement="right">
						<view class="radio-boxes" v-for="(item, index) in routeList" :key="index">
							<view class="flex align-center">
								<image src="/static/image/network.png" mode="" />
								<text class="font-28 mar-left-15 mar-right-10">{{item.chain_type}}</text>
								<text class="color_DD4A68 font-24">{{$t('home.recommendation')}}</text>
							</view>
							<up-radio :name="item.id"></up-radio>
						</view>
					</up-radio-group>
				</scroll-view>
			</view>
		</up-popup>

		<up-popup :show="visibleRecharge" mode="bottom" @close="visibleRecharge = false">
			<view class="popup-content">
				<view class="popup-head">
					<view></view>
					<text>{{$t('home.accumulated_value_amount')}}{{formData.amount}}USDT </text>
					<up-icon @click="visibleRecharge = false" name="close-circle" color="#ffffff" size="24"></up-icon>
				</view>
				<up-cell-group :border="false">
					<up-cell>
						<template #title>
							<span class="font-28">{{$t('home.order_number')}}</span>
							<view class="font-24 color_929292">{{orderIntel.order_code}}</view>
						</template>
						<template #value>
							<span @click="contentCopy(orderIntel.order_code,$t('my.copy_successful'))"
								class="font-28 color_929292">{{$t('home.copy')}}</span>
						</template>
					</up-cell>
					<up-cell>
						<template #title>
							<span class="font-28">{{$t('home.wallet_address')}}</span>
							<view class="font-24 color_929292">{{address2simple(orderIntel.address,16)}}</view>
						</template>
						<template #value>
							<span @click="contentCopy(orderIntel.address,$t('my.copy_successful'))"
								class="font-28 color_929292">{{$t('home.copy')}}</span>
						</template>
					</up-cell>
					<up-cell>
						<template #title>
							<span class="font-28">{{$t('home.kind_reminder')}}</span>
							<view class="font-24 color_1e90ff mar-top-10">{{$t('home.recharge_reminder')}}</view>
						</template>
					</up-cell>
				</up-cell-group>
				<view class="mar-top-60 pad-left-right-30">
					<up-button color="#ffc820" :customStyle="customStyle"
						@click="handJumpRecharge">{{$t('home.confirm_stored_value')}}</up-button>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		pledgeRobot,
		recharge,
		getSetting
	} from '@/api/index'
	import {
		rechargeChannel,
		rechargeWallet
	} from '@/api/user'
	import {
		addStrings,
		contentCopy,
		address2simple
	} from '@/util/commonFunction'
	import {
		useStore
	} from '@/store/commonStore'

	// 推荐规则
	const hanldeRule = () => {
		uni.navigateTo({
			url: '/pages/show-rich-text/show-rich-text?type=rechargeRules'
		})
	}

	const store = useStore()
	const customStyle = {
		color: '#000000',
		borderRadius: '20rpx',
		boxShadow: '0 1.2077vw 10rvw rgba(75, 98, 157, .11)'
	}

	const visibleNetwork = ref(false)
	const visibleRecharge = ref(false)
	const routeList = ref([]) // 可选择的线路
	const orderIntel = ref("")
	const formData = ref({
		channel_id: '',
		amount: '',
	});

	const robotList = ref([]) // 机器人列表
	const getDate = async () => {
		const res = await pledgeRobot()
		robotList.value = res.data.lists
		formData.value.amount = addStrings(robotList.value[0].init_fund, robotList.value[0].price)
	}
	// 获取选择的线路
	const lineName = computed(() => {
		let chain_type = "";
		routeList.value.forEach(item => {
			if (formData.value.channel_id === item.id) {
				return chain_type = item.chain_type
			}
		});

		return chain_type;
	});

	// 限制输入框的值
	const handleInput = (event) => {
		let inputValue = event; // 从事件对象中获取输入的值
		// 只允许输入数字和小数点
		inputValue = inputValue.toString().replace(/[^0-9.]/g, "");
		// 限制小数点后面最多4位
		const decimalIndex = inputValue.indexOf(".");
		// 获取精度
		const decimals = 4;
		if (decimalIndex !== -1) {
			const decimalPart = inputValue.substring(decimalIndex + 1);
			if (decimalPart.length > decimals) {
				inputValue = inputValue.substring(0, decimalIndex + decimals + 1);
			}
		}

		// 更新输入框的值
		formData.value.amount = inputValue;
	};

	//获取可选择的线路
	const handSelectRoute = async () => {
		const res = await rechargeChannel()
		// const res = await rechargeWallet()
		routeList.value = res.data.lists
		formData.value.channel_id = routeList.value[0].id
	}

	// 确认充值
	const handConfirmRecharge = async () => {
		const res = await recharge({
			...formData.value
		})
		orderIntel.value = res.data

		visibleRecharge.value = true
	}

	// 跳转到充值地址
	const handJumpRecharge = async () => {
		// const res = await getSetting({
		// 	codes: ["user_recharge_jump_url"]
		// });
		// const herf = res.data.setting.user_recharge_jump_url;
		// // #ifdef APP-PLUS
		// plus.runtime.openURL(herf);
		// // #endif

		// // #ifdef H5
		// window.location.href = herf;
		// // #endif

		visibleRecharge.value = false
	}

	onLoad(() => {
		getDate()
		handSelectRoute()
	})
</script>

<style lang="scss" scoped>
	:deep(.u-navbar__content__right__text) {
		color: #ffffff;
	}

	:deep(.u-input) {
		height: 45px;
		border-radius: .19324vw;
		background: #fff;
		border: .02415vw solid #979797;
		box-sizing: border-box;
	}

	.radio-boxes {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-width: 100%;
		padding: 3.6232vw;
		border-radius: 1.9324vw;
		margin-bottom: 2.4155vw;
		background-color: #ffc820;
		box-sizing: border-box;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}


	.container {
		min-height: 100vh;
		background: url('/static/image/topbg.png') top no-repeat;
		background-size: contain;

		.content {
			padding: 3.6232vw;
			box-sizing: border-box;

			.quk-card {
				padding: 5.314vw;
				line-height: 1;
				border-radius: 2.4155vw;
				margin-bottom: 3.8647vw;
				background: #fff;
				box-shadow: 0 1.2077vw 4.8309vw rgba(59, 72, 92, .14);
			}

			.wt-panel {
				padding: 3.6232vw;
				border-radius: 3.8647vw;
				background: #fff;

				.network {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					background-color: rgb(255, 236, 236);
					border-radius: 20rpx;
					padding: 10rpx;
					margin-bottom: 30rpx;

					.item-btn {
						width: 24.1546vw;
						text-align: center;
						padding: 2.4155vw 0;
						border-radius: 2.4155vw;
						font-size: 3.3816vw;
						margin-right: -1.4493vw;
						color: #1a1a1a;
						background-color: #ffc820;
					}
				}

				.tri-cell {
					margin-bottom: 4.8309vw;
				}

				.rc-cell {
					display: flex;
					align-items: center;
					padding: 2.8986vw;
					border-radius: 2.1739vw;
					font-size: 3.3816vw;
					margin-bottom: 2.8986vw;
					background: rgba(104, 107, 127, .09);
					line-height: 1.7;

					.flex_bd {
						flex: 1;

						.rc-title {
							font-size: 26rpx;
						}
					}

					.item-btn {
						width: 24.1546vw;
						text-align: center;
						padding: 2.4155vw 0;
						border-radius: 2.4155vw;
						font-size: 3.3816vw;
						margin-right: -1.4493vw;
						color: #1a1a1a;
						background-color: #ffc820;
					}
				}
			}
		}
	}

	.popup-content {
		min-height: 600rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;

		.popup-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			padding: 24rpx 40rpx;
			text-align: center;
			background-color: #0F0F0E;
			color: #ffffff;
		}

		.scroll-list {
			height: 486rpx;
			padding: 0 40rpx;
			padding-top: 30rpx;
			box-sizing: border-box;
		}
	}
</style>